<template>
    <fieldset>
        <legend>登录页</legend>
        用户名：
        <input type="text" v-model="username">
        <br>
        密码：
        <input type="password" v-model="password" @keydown.enter="login">
        <br>
        <button @click="login">登录</button>
    </fieldset>
</template>
<script setup>
import {ref} from "vue"
import * as api from "../../api/users"
import {useRouter} from "vue-router"
// 1.获取输入框的用户名和密码
let username = ref("")
let password = ref("")

// 2.发起请求，请求登录
let router =useRouter()
let login=async()=>{
    let res = await api.loginApi(username.value,password.value)
    console.log(res);
    // 服务器会返回token,这个token是个令牌，这个令牌需要保存在本地，后续请求的时候带上令牌，就能随意访问服务器的数据了
    // 1.localStorage,关掉页面，只要token还具备时效性，那么就能访问其他页面，不需要重新登录
    // 2.sessionStorage，用户关掉页面，token就被清除，不管他还生不生效，重新打开页面，用户重新登录
    if(res.data.state){
        // 登录成功，将token存到本地
        sessionStorage.setItem('qf-token',res.data.token)
        // 登录成功,页面要进行跳转
        router.push("/")
    }else{
        alert(res.data.msg)
    }
}
// 3.判定请求成功和请求失败的情况
</script>